import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/utils/cash_utils.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class NormalSectorChart extends StatefulWidget {
  final String incoming;
  final String outgoing;
  final num incomingAmount;
  final num outgoingAmount;

  const NormalSectorChart(
      {Key key,
      this.incoming,
      this.outgoing,
      this.incomingAmount,
      this.outgoingAmount})
      : super(key: key);

  @override
  _NormalSectorChartState createState() => _NormalSectorChartState();
}

class _NormalSectorChartState extends State<NormalSectorChart> {
  List<Color> colors = [
    Color(0xff2873E7),
    Color(0xff8EB7F5),
  ];

  int touchedIndex;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.7,
      child: Row(
        children: <Widget>[
          const SizedBox(
            height: 18,
          ),
          Expanded(
            child: AspectRatio(
              aspectRatio: 1,
              child: PieChart(
                PieChartData(
                    pieTouchData: PieTouchData(
                        touchCallback: (touchEvent, pieTouchResponse) {
                      setState(() {
                        touchedIndex = pieTouchResponse
                            ?.touchedSection?.touchedSectionIndex;
                      });
                    }),
                    borderData: FlBorderData(show: false),
                    sectionsSpace: 0,
                    centerSpaceRadius: 0,
                    startDegreeOffset: -90,
                    sections: showingSections()),
              ),
            ),
          ),
          SizedBox(
            width: getDp(34),
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                height: getDp(12),
              ),
              Indicator(
                color: colors[0],
                text: S.current.incoming,
                amount: widget.incoming,
              ),
              Indicator(
                color: colors[1],
                text: S.current.outgoing,
                amount: widget.outgoing,
              ),
            ],
          ),
        ],
      ),
    );
  }

  List<PieChartSectionData> showingSections() {
    num total = widget.incomingAmount + widget.outgoingAmount;

    return List.generate(2, (i) {
      final isTouched = i == touchedIndex;
      // final double fontSize = isTouched ? 25 : 16;
      final double radius = isTouched ? 85 : 80;
      switch (i) {
        case 0:
          return PieChartSectionData(
            color: colors[0],
            value: total == 0 ? 1 : widget.incomingAmount / total,
            title: widget.incoming,
            radius: radius,
            showTitle: false,
          );
        case 1:
          return PieChartSectionData(
            color: colors[1],
            value: total == 0 ? 1 : widget.outgoingAmount / total,
            title: widget.outgoing,
            radius: radius,
            showTitle: false,
          );
        default:
          return null;
      }
    });
  }
}

class Indicator extends StatelessWidget {
  final Color color;
  final String text;
  final String amount;

  const Indicator({Key key, this.color, this.text, this.amount})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: getDp(10)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: getDp(11),
            height: getDp(11),
            margin: EdgeInsets.only(
              top: getDp(5),
            ),
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(getDp(2)),
            ),
          ),
          SizedBox(
            width: getDp(10),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                text,
                style: TextStyle(
                    fontSize: getSp(14),
                    fontWeight: FontWeight.w700,
                    color: aceBlackColor,
                    height: 20 / 14),
              ),
              Text(
                '$amount',
                style: TextStyle(
                  color: aceBlackColor,
                  fontSize: getSp(14),
                  fontWeight: FontWeight.w400,
                  height: 20 / 14,
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
